import React, { ReactNode } from 'react';
import { PageProvider } from './hooks/page';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { SnackbarProvider } from 'notistack';
import StoreProvider from './store/StoreProvider';
import { Route, Location } from 'umi';

const theme = createMuiTheme({
  palette: {
    primary: {
      dark: '#478eb2',
      main: '#66ccff',
      light: '#84d6ff',
      contrastText: '#fff',
    },
  },
});

export function rootContainer(container: ReactNode) {
  return (
    <MuiThemeProvider theme={theme}>
      <SnackbarProvider maxSnack={3}>
        <PageProvider>
          <StoreProvider>{container}</StoreProvider>
        </PageProvider>
      </SnackbarProvider>
    </MuiThemeProvider>
  );
}

enum IAction {
  POP = 'POP',
  PUSH = 'PUSH',
}

const rootElement = document.getElementById('root') || document.body;
const scrollTopMap = new Map<any, number>();
let oldLocation: Location;
export function onRouteChange(option: { action: IAction; location: Location }) {
  const { action, location } = option;
  oldLocation && scrollTopMap.set(oldLocation.key, rootElement.scrollTop);
  if (action === IAction.PUSH) {
    rootElement.scrollTo(0, 0);
  } else {
    rootElement.scrollTo(0, scrollTopMap.get(location.key) || 0);
  }
  oldLocation = location;
  // console.log(scrollTopMap.size);
}

document.getElementById('loading')?.remove();
document.getElementById('loading-style')?.remove();
document.getElementById('loading-script')?.remove();
